<template>
  <div >
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >车间模拟</el-breadcrumb-item>
        <el-breadcrumb-item >库存</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="background-color: #FFFFFF;padding: 10px;border-radius: 7px;">
      <!-- 订单列表 -->
      <div style="margin-bottom: 40px;">
        <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;">
          <span class="order-title">库存列表</span>
          <div>
            <el-button type="primary" plain icon="el-icon-plus" @click="stockshowEdit = true">新增</el-button>
          </div>
        </div>
        <vxe-table
          border
          resizable
          highlight-hover-row
          highlight-current-row
          align="center"
          :edit-config="{trigger: 'click', mode: 'row'}"
          show-overflow
          :loading="stockLoading"
          ref="StockTable"
          :data="StockTable">
          <vxe-table-column field="stockId" title="ID" ></vxe-table-column>
          <vxe-table-column field="stockName" title="名称"  ></vxe-table-column>
          <vxe-table-column field="quantity" title="数量"  :edit-render="{name: 'input', immediate: true, attrs: {type: 'number'}}"></vxe-table-column>
          <vxe-table-column title="操作" width="140">
            <template v-slot="{ row }">
              <template v-if="$refs.StockTable.isActiveByRow(row)">
                <el-button type="success" plain size="small" @click="stockUpdate(row)">保存</el-button>
                <el-button type="info" plain size="small" @click="stockCancle(row)">取消</el-button>
              </template>
              <template v-else>
                <el-button type="primary" plain size="mini" @click="stockEditor(row)">编辑</el-button>
                <el-button type="danger"plain size="small" @click="stockDelete(row)" >删除</el-button>
              </template>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>





    <!-- 添加order弹窗 -->
    <vxe-modal ref="OrderModal" v-model="stockshowEdit" title="库存添加" width="500" resize destroy-on-close>
      <vxe-form :data="stockAddForm"  title-align="right" title-width="100">
        <vxe-form-item title="名称:" field="stockName" span="20" :item-render="{name: 'input',attrs: {type: 'text', placeholder: '请输入名称'}}"></vxe-form-item>
        <vxe-form-item title="数量:" field="quantity" span="20" :item-render="{name: 'input', attrs: {type:'number',placeholder: '请输入库存数量'}}"></vxe-form-item>
        <vxe-form-item align="right" span="24">
          <vxe-button type="submit" status="primary" @click="stockAdd">保存</vxe-button>
          <vxe-button @click="stockshowEdit = false">取消</vxe-button>
        </vxe-form-item>
      </vxe-form>
    </vxe-modal>
    </div>
  </div>
</template>

<script>
  import StockApi from '@/api/stockApi'
  export default{
    data(){
      return{
        // 订单添加form
        stockAddForm:{
          quantity:"",
          status:'1',
          stockName:''
        },

        // 订单分页
        StockPageInfo:{
          // pageNo:1,
          pageSize:10,
          currentPage: 1,
          count:0
        },

        // 订单
        StockTable:[],

        // 加载
        stockLoading:false,


        // 显示
        stockshowEdit:false,


        // 查询
        orderQueryInput:"",



        // 添加订单status选择
        statusList: [
          { label: '排队', value: '-1' },
          { label: '加工中', value: '0' },
          { label: '完成', value: '1' }
        ],
      }
    },
    methods:{
      // 获取订单list
      getStockList(){
        this.stockLoading = true
        StockApi.stockList(this.StockPageInfo).then(res => {
          if(res.data.status === "200"){
            this.StockTable = res.data.data.records
            this.stockLoading = false
          }
        })

      },
      // 订单删除
      stockDelete(row){
        this.$XModal.confirm('您确定要删除吗？').then(type => {
          if(type === "confirm"){
            StockApi.stockDelete(row.stockId).then(res => {
              if(res.data.status === "200"){
                // 重新获取数据
                this.getStockList()
              }
            })
          }
        })
      },
      // 订单编辑
      stockEditor(row){
        this.$refs.StockTable.setActiveRow(row)
      },
      // 订单更新
      stockUpdate(row){
        this.$refs.StockTable.clearActived().then(() => {
          StockApi.stockUpdate(row).then(res => {
            if(res.data.status === "200"){
              this.getStockList()
            }
          })
        })
      },

      // 订单取消
      stockCancle(row){
        var Table = this.$refs.StockTable
        Table.clearActived().then(() => {
          // 还原行数据
          Table.revertData(row)
        })
      },

      //订单插入
      stockAdd(){
        StockApi.stockAdd(this.stockAddForm).then(res => {
          if(res.data.status === "200"){
            this.getStockList()
            this.stockshowEdit = false
          }
        })
      },
    },
    created() {
      // 订单list
      this.getStockList()
    }
  }
</script>

<style scoped="scoped">
  .order-title{
    padding: 10px 20px;
    display: block;
    height: 20px;
    background-color: #F2F6FC;
    box-shadow: 1px 1px 3px #909399;
    margin-bottom: 2px;
    color: #2196E0;
    border-radius: 8px;
  }
</style>
